#{extends 'main.html' /}
#{set title:'Home' /}
<style>
div#wrapper {
	margin: 0 auto;
	padding: 0;
	border: 0;
	width: 1066px;
	text-align: left;	
}
#wrapper div{}

div#left{	
	float:left;
	width:100px;
}

div#left ul {
	list-style: none;
	margin-left: 0;
	padding: 0 5px;
	margin-top: 0px;
}
div#left ul li {
	margin-bottom: 8px;
	margin-left: 0;
	padding-left: 0;
	
}
div#left .notchedListItems a {
display: block;
border: solid #666;
text-decoration: none;
outline: none;
color: black;
background: #E4E4E4;
border-width: 0 1px;
cursor: move;
text-align: center;
}

div#left .notchedListItems a b {
display: block;
position: relative;
top: -1px;
left: 0;
border: solid #666;
font-weight: normal;
border-width: 1px 0 0;
}
div#left .notchedListItems a b b {
border-width: 0 0 1px;
top: 2px;
padding: 1px 6px;
}

div#main{
	float:left;
	width:800px;	
}
div#main p{
	float:left;
	width:800px;	
}
div#right{
	float:left;
	width:90px;
	margin-left: 5px;
}

td{border: solid 1px;color:#ccc}

div#footer {
	clear: both;
}
#draggable { width: 100px; height: 70px; background: silver; }

</style>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 <script>
  var order={};
  order.fieldList=new Array();
 (function ($){
	  var check=false, isRelative=true;

	  $.elementFromPoint = function(x,y)
	  {
	    if(!document.elementFromPoint) return null;

	    if(!check)
	    {
	      var sl;
	      if((sl = $(document).scrollTop()) >0)
	      {
	       isRelative = (document.elementFromPoint(0, sl + $(window).height() -1) == null);
	      }
	      else if((sl = $(document).scrollLeft()) >0)
	      {
	       isRelative = (document.elementFromPoint(sl + $(window).width() -1, 0) == null);
	      }
	      check = (sl>0);
	    }

	    if(!isRelative)
	    {
	      x += $(document).scrollLeft();
	      y += $(document).scrollTop();
	    }

	    return document.elementFromPoint(x,y);
	  }	

	})(jQuery);
	
  $(document).ready(function() {
	  
	  
    //$(".notchedListItems a").draggable();
    
 	
 	// there's the items and the table
	var $gallery = $( "#items" ),
		$d_table = $( "#d_table" );

	// let the gallery items be draggable
	$( "a", $gallery ).draggable({
		cancel: "a.ui-icon", // clicking an icon won't initiate dragging
		revert: "invalid", // when not dropped, the item will revert back to its initial position
		containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present	    
		helper: "clone",
		cursor: "move"
	});
	
    // let the table be droppable, accepting the items   
	$d_table.droppable({
		accept: "#items a",
		activeClass: "ui-state-highlight",
		drop: function( event, ui ) {	
			var x = event.pageX - $(window).scrollLeft();
			var y = event.pageY - $(window).scrollTop();
			var component = getComponent(ui.draggable);
			setTimeout(function() {//hack method to disable ui.draggable
				var theCell = $.elementFromPoint(x, y);
				var colIndex = $(theCell).parent().children().index($(theCell));
				var rowIndex = $(theCell).parent().parent().children().index($(theCell).parent());
				var field ={
					fieldName:'text',
					cellRange:rowIndex+"_"+ colIndex
				};
				order['fieldList'].push(field);
				$('#checker').val(order);
				$(theCell).empty();
				$(component).appendTo($(theCell));
			}, 0);
		}
	});
	
    function getComponent(type){
    	if(type.text()=='Label') return "<input type=\"text\" size=8>";
    }
    
  });
  </script>

<div id="left">
    <ul id="items" class="notchedListItems">
		<li><a><b><b>Label</b></b></a></li>
		<li><a><b><b>InputBox</b></b></a></li>
		<li><a><b><b>Table</b></b></a></li>
		<li><a><b><b>CheckBox</b></b></a></li>
		<li><a><b><b>RadioBox</b></b></a></li>
		<li><a><b><b>TextArea</b></b></a></li>
	</ul>
	
</div>
<div id='main'>
    <h1>Title:<input type="text" name="order_title"></h1>
	<table id="d_table" width="100%" cellSpacing="0" >
	    #{list items:1..50, as:'iRow'}
			<tr>
				#{list items:1..10, as:'iCol'}
		    		<td width='10%' height="15"></td>
				#{/list}
			</tr>
  		#{/list}
	</table>
</div>
<div id='right'>
	属性设置:
	<textarea id="checker" rows="20" cols="20">在这里设置属性。 </textarea>
</div>